// 产生验证码的集合
const randomText = [
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
];

// // 随机生成颜色
// function randomColor() {
//   const r = Math.floor(Math.random() * 256);
//   const g = Math.floor(Math.random() * 256);
//   const b = Math.floor(Math.random() * 256);
//   return `rgb(${r},${g},${b})`;
// }

/**
 *
 * @param {*} canvasId canvas 元素的 id
 * @param {*} captchaNum 生成的验证码位数
 * @param {*} lineNum 验证码图片中线的数量
 * @param {*} dropNum 验证码图片中点的数量
 * @returns 生成的验证码字符串
 */
export default function captcha(canvasId, captchaNum = 4) {
  const canvasDom = document.getElementById(canvasId); // 获取canvas元素
  const canvasWidth = canvasDom.width; // 获取canvas元素的宽
  const canvasHeight = canvasDom.height; // 获取canvas元素的高
  const context = canvasDom.getContext('2d');
  // canvas元素重新赋值，以清空画布
  canvasDom.width = canvasWidth;
  canvasDom.height = canvasHeight;

  let captchaString = ''; // 定义验证码变量；

  // 生成验证码 及 验证码图片
  for (let i = 0; i < captchaNum; i += 1) {
    const sw = window.screen.width;
    const useFontSize = sw > 1900 ? 30 : 15;
    const index = Math.floor(Math.random() * randomText.length);
    captchaString += randomText[index];
    const deg = Math.random() - 0.5; // 产生一个随机弧度
    // const x = (i === 0 ? 5 : 10) + i * 15; // 文字在canvas上的x坐标
    const x = (canvasWidth / (captchaNum + 1)) * (i + 1) - canvasWidth / ((captchaNum + 1) * 2); // 文字在canvas上的x坐标
    const y = canvasHeight / 2 + canvasHeight / 4 + ((Math.random() - 0.5) * canvasHeight) / 10; // 文字在canvas上的y坐标
    context.font = `${useFontSize}px ArialMt`;
    context.translate(x, y);
    context.rotate(deg);
    // context.fillStyle = randomColor();
    context.fillStyle = '#88d7fd';
    context.fillText(randomText[index], 0, 0);
    context.rotate(-deg);
    context.translate(-x, -y);
  }

  // // 验证码图片上画线条
  // for (let i = 0; i < lineNum; i += 1) {
  //   // 验证码上显示线条
  //   context.strokeStyle = randomColor();
  //   context.beginPath();
  //   context.moveTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
  //   context.lineTo(Math.random() * canvasWidth, Math.random() * canvasHeight);
  //   context.stroke();
  // }
  //
  // // 验证码图片上画点
  // for (let i = 0; i < dropNum; i += 1) {
  //   // 验证码上显示小点
  //   context.strokeStyle = randomColor();
  //   context.beginPath();
  //   const x = Math.random() * canvasWidth;
  //   const y = Math.random() * canvasHeight;
  //   context.moveTo(x, y);
  //   context.lineTo(x + 1, y + 1);
  //   context.stroke();
  // }

  return captchaString;
}
